<template>
  <div>
    <el-card class="card">
      <div slot="header">
        <el-button type="primary" @click="dialogFormVisible = true"
          >新增</el-button
        >
      </div>
      <div>
        <el-table :data="activeList" border style="width: 100%">
          <el-table-column label="序号" align="center" type="index">
          </el-table-column>
          <el-table-column label="商品图片">
            <template slot-scope="scope">
              <div>
                <img :src="scope.row.pic" alt="" class="pic" />
              </div>
            </template>
          </el-table-column>
          <el-table-column width="180px" label="活动时间">
            <template slot-scope="scope">
              <div>开始时间：{{ scope.row.promotionStartTime }}</div>
              <div>结束时间：{{ scope.row.promotionEndTime }}</div>
            </template>
          </el-table-column>
          <el-table-column label="是否过期" align="center">
            <template slot-scope="scope">
              <!-- <div v-if="scope.row.publishStatus === 1">过期</div>
              <div v-else>未过期</div> -->
              <p>{{compareTime(scope.row.promotionEndTime)}}</p>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" align="center">
          </el-table-column>
          <el-table-column prop="brandName" label="品牌名称" align="center">
          </el-table-column>
          <el-table-column prop="price" label="商品价格" align="center">
          </el-table-column>
          <el-table-column
            prop="productCategoryName"
            label="商品类别"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div>
                <el-button
                  type="text"
                  style="color: red"
                  @click="del(scope.row.recommendId)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog title="热销详情" :visible.sync="dialogFormVisible" width="90%">
      <el-card>
        <div slot="header">条件查询</div>
        <div>
          <el-row :gutter="20">
            <el-form ref="form" :model="searchForm" size="mini">
              <el-col :span="4" :offset="0">
                <el-form-item>
                  <el-input
                    v-model="searchForm.name"
                    placeholder="商品名称/模糊查询"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4" :offset="0">
                <el-form-item>
                  <el-input
                    v-model="searchForm.productCategoryId"
                    placeholder="商品货号"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="">
                  <el-select
                    v-model="searchForm.brandName"
                    placeholder="品牌"
                    clearable
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="">
                  <el-select
                    v-model="searchForm.publishStatus"
                    placeholder="上架状态"
                    clearable
                  >
                    <el-option label="未上架" value="0"> </el-option>
                    <el-option label="已上架" value="1"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="">
                  <el-select
                    v-model="searchForm.verifyStatus"
                    placeholder="审核状态"
                    clearable
                  >
                    <el-option label="未审核" value="0"> </el-option>
                    <el-option label="已审核" value="1"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4" :offset="0">
                <el-form-item>
                  <el-button type="primary" size="mini" @click="onsubmit"
                    >查询</el-button
                  >
                  <el-button type="primary" @click="regist">重置</el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </div>
      </el-card>
      <el-card>
        <div slot="header">商品列表</div>
        <div>
          <el-radio-group
            v-model="productId"
            style="width: 100%"
            @change="getstatus"
          >
            <el-table :data="productsList" border style="width: 100%">
              <el-table-column type="index" label="序号" align="center">
              </el-table-column>
              <el-table-column label="选择" width="180" align="center">
                <template slot-scope="scope">
                  <div>
                    <el-radio :label="scope.row.id"> <span></span> </el-radio>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="商品图片" align="center">
                <template slot-scope="scope">
                  <div>
                    <img :src="scope.row.pic" alt="" class="pic" />
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="商品名称" align="center">
              </el-table-column>
              <el-table-column label="商品价格" align="center">
                <template slot-scope="scope">
                  <div>原价：{{ scope.row.price }}</div>
                  <div>现价：{{ scope.row.price }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="productCategoryName"
                label="商品类别"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="weight" label="重量" align="center">
              </el-table-column>
            </el-table>
          </el-radio-group>
        </div>
      </el-card>
      <el-pagination
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <el-dialog
        title="编辑限时活动"
        append-to-body
        :visible.sync="innerVisible"
      >
      <el-card>


        <el-row :gutter="10">
          <el-form
            ref="form"
            :model="form"
            :inline="true"
            label-width="100px"
            size="mini"
          >
            <el-col :span="12" :offset="0">
              <el-form-item label="商品原价" align="left">

                <span>{{ productsInfo.price }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="商品名称"  align="left">
                <span>{{ productsInfo.name }}</span>

              </el-form-item>
            </el-col>

            <el-col :span="12" :offset="0">
              <el-form-item label="促销价格"  align="left">
                <el-input-number
                  v-model="form.promotionPrice"
                  class="myInput"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12" :offset="0"  align="left">
              <el-form-item label="排序">
                <el-input-number v-model="form.sort" class="myInput" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="开始时间"  align="left">
                <el-date-picker
                  v-model="form.promotionStartTime"
                  class="myInput"
                  type="datetime"
                  placeholder="开始时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="结束时间"  align="left">
                <el-date-picker
                  v-model="form.promotionEndTime"
                  class="myInput"
                  type="datetime"
                  placeholder="开始时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0" >
              <el-form-item label="活动限购数量"  align="left">
                <el-input v-model="form.promotionPerLimit" class="myInput" />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="商品图片"  align="left">
                <img
                  style="width: 150px; height: 150px"
                  :src="productsInfo.pic"
                  alt=""
                />
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>

       </el-card>
         <span slot="footer">
        <el-button @click="innerVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="edit"
        >编辑</el-button>
      </span>
      </el-dialog>

    </el-dialog>
  </div>
</template>

<script>
import {
  getActiveList,
  delActiveList,
  getProducts,
  findAllbrand,
  addActive
} from "@/api/market";
import mixin from "@/minx/index";
export default {
  props: {},
  mixins: [mixin],
  data() {
    return {

      activeList: [],
      dialogFormVisible: false,
      productsList: [],
      searchForm: {},
      options: [],
      productId: "",
      innerVisible: false,
      productsInfo: {},
      form: {
        productId: "",
        promotionPrice: "",
        promotionPerLimit: "",
        sort: "",
        promotionStartTime: "",
        promotionEndTime: "",
      },
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
  watch: {},
  methods: {
    async init() {
      this.activeList = (await getActiveList()).data.items;
      this.productsList = (
        await getProducts(
          this.page.currentPage,
          this.page.size,
          this.searchForm
        )
      ).data.rows;
      this.page.total = (
        await getProducts(
          this.page.currentPage,
          this.page.size,
          this.searchForm
        )
      ).data.total;
      //品牌列表
      this.options = (await findAllbrand()).data.items;
      // console.log(this.productsList);
    },
    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delActiveList(id).then((res) => {
            if (res.success) {
              this.init();
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    onsubmit() {
      console.log(this.searchForm);
      this.init();
    },
    regist() {
      this.searchForm = {};
    },
    getstatus(id) {
      this.innerVisible = !this.innerVisible;
      this.productsList.forEach((el) => {
        if (el.id == id) {
          this.productsInfo = el;
        }
      });
      this.form.productId=id

      // console.log(this.productsInfo);
    },
    handleSizeChange(val) {
      console.log(val);
      this.page.size = val;
      this.page.currentPage = 1;
      this.init();
    },
    handleCurrentChange(val) {

      this.page.currentPage = val;
      this.init();
    },
    edit(){

       this.$confirm('是否确认新增最热推荐商品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           addActive(this.form).then(res=>{
       if(res.success){
          this.form={}
          this.$message.success('添加成功')
          this.dialogFormVisible=this.innerVisible=false
          this.init()
       }
      })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消推荐'
          });
        });
    },
    compareTime(endtime){
      var timer=new Date(endtime).getTime()-new Date().getTime()
      return timer>0? "未过期":'过期'
    }
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.card {
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
  .pic {
    width: 100px;
    height: 100px;
  }
}
.pic {
  width: 100px;
  height: 100px;
}

</style>
